<template>
	<div class="container">
		<div class="list-box">
			<el-card>
				<!-- 头部搜素start -->
				<el-form :model="query" ref="queryForm" v-show="showSearch" :inline="true">
					<el-form-item label="名称">
						<common-input v-model="query.a" placeholder="请输入" clearable  />
					</el-form-item>

					<el-form-item label="周期">
						<el-select v-model="query.b" placeholder="请选择" clearable >
							<el-option label="全部" value></el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="时间">
						<el-date-picker v-model="query.c" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
					</el-form-item>

					<el-form-item label="状态">
						<el-select v-model="query.b" placeholder="请选择" clearable >
							<el-option label="全部" value></el-option>
						</el-select>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
						<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
					</el-form-item>
				</el-form>
				<!-- 头部搜素end -->

				<!-- 按钮start -->
				<el-row :gutter="10" class="mb8">
					<el-col :span="1.5">
						<el-button type="primary" plain icon="el-icon-plus" @click="edit(null)" hasPermi>新增</el-button>
					</el-col>
					<el-col :span="1.5">
						<el-button type="danger" plain icon="el-icon-delete" :disabled="multiple" @click="del(selectionIds)" hasPermi>批量删除</el-button>
					</el-col>
					<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
				</el-row>
				<!-- 按钮end -->

				<!--列表 start-->
				<common-table v-loading="loading" :data="list" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55" align="center" />



					<el-table-column label="名称" align="left" prop="a">
						<template slot-scope="{row}">{{ row.a }}</template>
					</el-table-column>

					<el-table-column label="周期" align="left" prop="a">
						<template slot-scope="{row}">{{ row.a }}</template>
					</el-table-column>

					<el-table-column label="时间" align="left" prop="a">
						<template slot-scope="{row}">{{ row.a }}</template>
					</el-table-column>

					<el-table-column label="状态" align="center" prop="a">
						<template slot-scope="{row}">
							<el-tag type="success" v-if="row.a == 1">正常</el-tag>
							<el-tag type="danger" v-else-if="row.a == 2">冻结</el-tag>
							<el-tag type="danger" v-else-if="row.a == 3">锁定</el-tag>
							<el-tag type="danger" v-else>注销</el-tag>
						</template>
					</el-table-column>

					<el-table-column label="操作" align="left" width="200">
						<template slot-scope="{row}">
							<el-button type="text" @click="edit(row)" hasPermi>详情</el-button>
							<el-button type="text" @click="edit(row)" hasPermi>编辑</el-button>
							<el-button type="text" @click="edit(row)" hasPermi>停用</el-button>
							<el-button type="text" @click="del(row.id)" hasPermi>删除</el-button>
						</template>
					</el-table-column>
				</common-table>

				<pagination v-show="total>0" :total="total" :page.sync="query.pageNum" :limit.sync="query.pageSize" @pagination="getList" />
			</el-card>
			<!-- 列表 end -->
		</div>

		<editDialog ref="editDialog" @refresh="getList" />
	</div>
</template>

<script>
import editDialog from './components/backupAdd';
import { backup_list } from '@/api/management/system/system.js';
export default {
	components: { editDialog },
	props: {},
	data() {
		return {
			filterMenu: '', //菜单筛选
			showSearch: true, // 查询部分显示
			total: 1, // 总条数
			loading: false, // table 加载中
			list: [{ a: 1 }], // 数据列
			selectionIds: '', // 列表选中数据id
			single: true, // 非单个禁用
			multiple: true, // 非多个禁用
			query: {
				pageNum: 1,
				pageSize: 10,
			}, // 查询条件
		};
	},
	watch: {},
	computed: {},
	methods: {
		/**
		 * 选择
		 */
		handleSelectionChange(selection) {
			this.selectionIds = selection.map((item) => item.id);
			this.single = selection.length != 1;
			this.multiple = !selection.length;
		},
		/**
		 * 获取列表
		 */
		getList() {
			this.loading = true;
			let query = { ...this.query };
			backup_list(query).then((res) => {
				this.list = res.rows;
				this.total = res.total;
				this.loading = false;
			});
		},
		/**
		 * 查询
		 */
		handleQuery() {
			this.query.pageNum = 1;
			this.getList();
		},
		/**
		 * 重置查询
		 */
		resetQuery() {
			this.query = this.$options.data().query;
		},
		/**
		 * 添加/编辑
		 */
		edit(row) {
			this.$refs.editDialog.show(row ? { ...row } : {});
		},
		/**
		 * 删除
		 */
		del(ids) {
			this.$confirm('是否确认删除数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					this.getList();
					this.$GlobalSuccessMessage('删除成功');
				})
		},
	},
	created() {
		this.getList();
	},
	mounted() {},
};
</script>
<style lang="scss" scoped>
.container {
  .list-box {
    clear: both;
    height: auto;
    overflow: hidden;
    padding: 20px;
  }
}
</style>
